<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>查询列表</title>
    <!-- 实现可编辑表格 -->
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('table .tdclass').click(function () {
                /* 1.先拿到这个td原来的值，然后将这个td变成一个input:text,并且原来的值不动 */
                var tdVal = $(this).text();
                var oInput = $("<input type='text' value='" + tdVal + "'/>");
                $(this).html(oInput);
                oInput.focus();

                /* 2.失去焦点，这个td变为原来的text，value为修改过后的value */
                oInput.blur(function () {
                    oInput.parent().html(oInput.val());
                });
            });
        });

        function save(id) {
            var resume = {
                id: $("#id" + id).text(),
                name: $("#name" + id).text(),
                address: $("#address" + id).text(),
                phone: $("#phone" + id).text()
            };
            //保存数据
            $.ajax({
                url: "/resume/update",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(resume),
                type: "POST",
                success: function (data) {
                    if (data == "success") {
                        alert("保存成功");
                        //跳转界面
                        window.location = "/resume/queryAll";
                    } else {
                        alert(data);
                    }
                }
            });
        };

        function deleteById(id) {
            var resume = {
                id: $("#id" + id).text(),
                name: $("#name" + id).text(),
                address: $("#address" + id).text(),
                phone: $("#phone" + id).text()
            };
            //删除数据
            $.ajax({
                url: "/resume/delete",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(id),
                type: "POST",
                success: function (data) {
                    if (data == "success") {
                        alert("删除成功");
                        //跳转界面
                        window.location = "/resume/queryAll";
                    } else {
                        alert(data);
                    }
                }
            });
        }

        function newResume() {
            document.getElementById("myDialog").show();
        }
        function close() {
            var dialog = document.getElementById("myDialog");
            dialog.dismiss();
        }
        function add() {
            var resume = {
                name: $("#newName" ).val(),
                address: $("#newAddress").val(),
                phone: $("#newPhone").val()
            };
            //新增数据
            $.ajax({
                url: "/resume/add",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(resume),
                type: "POST",
                success: function (data) {
                    if (data == "success") {
                        alert("新增成功");
                        //跳转界面
                        window.location = "/resume/queryAll";
                    } else {
                        alert(data);
                    }
                }
            });
        }

    </script>

</head>

<body>

<dialog  id="myDialog">
    <form id="resume" name="resume" >
        姓名：<input type="name" id="newName" /><br/>
        地址：<input type="address" id="newAddress"/><br/>
        手机：<input type="phone" id="newPhone"/><br/>
        <div>
            <input type="button" onclick="add()" value="保存"/>
            <input type="button" onclick="close()" value="关闭"/>
        </div>
    </form>
</dialog>

<div style="height: 30px">
    <button onclick="newResume()" style="float:right;">新增</button>
</div>
<div style="width: 100%;">
    <table id="tab" style="width:100%">
        <tr>
            <th>id</th>
            <th >姓名</th>
            <th>地址</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${resumeList}" var="item">
            <tr>
                <td class="tdclass"  id="id${item.id}">${item.id}</td>
                <td  class="tdclass" id="name${item.id}">${item.name}</td>
                <td class="tdclass" id="address${item.id}">${item.address}</td>
                <td class="tdclass" id="phone${item.id}">${item.phone}</td>
                <td style="min-width: 200px"><input type="button" onclick="save(${item.id})" value="保存"/>&nbsp;&nbsp;&nbsp;<input type="button"
                                                                                       onclick="deleteById(${item.id})"
                                                                                       value="删除"/></td>
            </tr>
        </c:forEach>

    </table>
</div>
</body>

<style type="text/css">
    table {
        border: 1px solid blue;
        width: 300px;
        border-collapse: collapse;
    }

    td, th {
        border: 1px solid blue;
        padding: 3px;
    }

    .tdclass{
        min-width: 200px;
    }
</style>
</html>